<template>
	<el-dialog
		:title="titleMap[mode]"
		v-model="visible"
		:width="700"
		destroy-on-close
		append-to-body
		@closed="emits('closed')"
	>
		<el-form
			:model="form"
			:rules="rules"
			ref="dialogForm"
			label-width="80px"
			:style="'el-dialog' === 'el-drawer' ? 'padding:0 20px' : ''"
		>

			<el-form-item label="用户名" prop="username">
				<el-input v-model="form.username" clearable placeholder="请输入用户名"/>
			</el-form-item>

			<el-form-item label="图片" prop="image">
				<sc-upload v-model="form.image" title="选择图片" file-select/>
			</el-form-item>

			<el-form-item label="文件" prop="file">
				<sc-upload
					v-model="form.file"
					title="上传文件"
					type="file"
					@success="handlerUploadFileFile"
				/>
			</el-form-item>

			<el-form-item label="性别" prop="sex">
				<el-radio-group v-model="form.sex">

					<el-radio
						v-for="(item, index) in dictData.sex"
						:key="index" :label="item.value"
					>{{ item.label }}
					</el-radio>

				</el-radio-group>
			</el-form-item>

			<el-form-item label="爱好" prop="like">
				<el-checkbox-group v-model="form.like">

					<el-checkbox
						v-for="(item, index) in dictData.like"
						:key="index" :label="item.value"
					>{{ item.label }}
					</el-checkbox>

				</el-checkbox-group>
			</el-form-item>

			<el-form-item label="多图" prop="pic">
				<sc-upload-multiple v-model="form.pic" title="选择多图" file-select/>
			</el-form-item>

			<el-form-item label="内容" prop="content">
				<editor v-model="form.content" placeholder="请输入内容" :height="400"/>
			</el-form-item>

			<el-form-item label="商家类型" prop="type">
				<el-select v-model="form.type" style="width:100%" clearable placeholder="请选择商家类型">

					<el-option
						v-for="(item, index) in dictData.server_type"
						:key="index" :label="item.label"
						:value="item.value"
					>{{ item.label }}
					</el-option>

				</el-select>
			</el-form-item>

			<el-form-item label="状态" prop="status">
				<el-switch v-model="form.status" :active-value="proxy.$CONFIG.SWITCH.ENABLE"
									 :inactive-value="proxy.$CONFIG.SWITCH.DISABLE"/>
			</el-form-item>

			<el-form-item label="状态2" prop="status2">
				<el-switch v-model="form.status2" :active-value="proxy.$CONFIG.SWITCH.ENABLE"
									 :inactive-value="proxy.$CONFIG.SWITCH.DISABLE"/>
			</el-form-item>

			<el-form-item label="订单状态" prop="order_status">
				<el-select v-model="form.order_status" style="width:100%" clearable placeholder="请选择订单状态">
					<template v-for="(item, index) in dictData.order_status">
						<el-option
							v-if="item.value != '-1'"
							:key="index" :label="item.label"
							:value="item.value"
						>{{ item.label }}
						</el-option>
					</template>
				</el-select>
			</el-form-item>

			<el-form-item label="评分" prop="rate">
				<el-rate v-model="form.rate" style="margin-top: 8px;"/>
			</el-form-item>

			<el-form-item label="颜色" prop="color">
				<el-color-picker v-model="form.color"/>
			</el-form-item>

			<el-form-item label="进度条" prop="pro">
				<el-slider v-model="form.pro"/>
			</el-form-item>

			<el-form-item label="省" prop="province">
				<el-input v-model="form.province" clearable placeholder="请输入省"/>
			</el-form-item>

			<el-form-item label="市" prop="city">
				<el-input v-model="form.city" clearable placeholder="请输入市"/>
			</el-form-item>

			<el-form-item label="区" prop="area">
				<el-input v-model="form.area" clearable placeholder="请输入区"/>
			</el-form-item>

			<el-form-item label="省市区" prop="address">
				<city-linkage v-model="form.address" valueType="name"/>
			</el-form-item>

			<el-form-item label="多input" prop="list">
				<sc-form-table v-model="form.multiLineList" :addTemplate="form.addTemplate" drag-sort placeholder="暂无数据">
					<el-table-column prop="val" label="字段1" width="100">
						<template #default="scope">
							<el-input v-model="scope.row.val1" placeholder="请输入内容"></el-input>
						</template>
					</el-table-column>
					<el-table-column prop="val" label="字段2" width="100">
						<template #default="scope">
							<el-input v-model="scope.row.val2" placeholder="请输入内容"></el-input>
						</template>
					</el-table-column>
				</sc-form-table>
			</el-form-item>

			<el-form-item label="用户ids" prop="users">
				<el-input v-model="form.users" clearable placeholder="请输入用户ids"/>
			</el-form-item>

			<el-form-item label="用户id" prop="user_id">
				<el-input v-model="form.user_id" clearable placeholder="请输入用户id"/>
			</el-form-item>

		</el-form>
		<template #footer>
			<el-button @click="visible = false">取 消</el-button>
			<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>

<script setup>
import {ref, reactive, defineExpose, onMounted, getCurrentInstance} from 'vue'
import {useRouter} from "vue-router";
import {ElMessage} from 'element-plus'
import systemKikiTest5 from '@/api/apis/system/systemKikiTest5'
import systemDict from '@/api/apis/system/dataDict'
import editor from '@/components/scEditor'
import cityLinkage from '@/components/maCityLinkage'
import threeLevelLinkage from '@/components/maCityLinkage/threeLevelLinkage'


const emits = defineEmits(['success', 'closed'])
const {proxy} = getCurrentInstance();
const router = useRouter();

const mode = ref('add')
const treeList = ref([])
const visible = ref(false)
const isSaveing = ref(false)
const dialogForm = ref(null)

const titleMap = reactive({add: '新增测试5', edit: '编辑测试5'})
const dictData = reactive({
	sex: [],
	like: [],
	server_type: [],
	order_status: [],

})
const form = reactive({
	id: '0',
	username: '',
	image: '',
	file: '',
	sex: '0',
	like: ['0'],
	pic: '',
	content: '',
	type: '0',
	status: proxy.$CONFIG.SWITCH.ENABLE,
	status2: proxy.$CONFIG.SWITCH.ENABLE,
	order_status: '0',
	rate: '0',
	color: proxy.$TOOL.data.get('APP_COLOR') || proxy.$CONFIG.COLOR || '#536dfe',
	pro: '0',
	province: '',
	city: '',
	area: '',
	address: [],
	multiLineList: [
		{
			val1: '',
			val2: '',
		},
	],
	addTemplate: {
		val1: '',
		val2: '',
	},
	users: '',
	user_id: '0',

})
const rules = reactive({})

onMounted(async () => {
	await getDictData()
	if (router.currentRoute.value.query.open) {
		open('add');
	}
})

const getDictData = () => {
	systemDict.getDict('sex').then(res => {
		dictData.sex = res.data
	})
	systemDict.getDict('like').then(res => {
		dictData.like = res.data
	})
	systemDict.getDict('server_type').then(res => {
		dictData.server_type = res.data
	})
	systemDict.getDict('order_status').then(res => {
		dictData.order_status = res.data
	})

}

const open = (type = 'add') => {
	mode.value = type
	visible.value = true

}

const submit = () => {
	dialogForm.value.validate(async (valid) => {
		if (valid) {
			isSaveing.value = true
			const res = mode.value === 'add' ? await systemKikiTest5.save(form) : await systemKikiTest5.update(form.id, form)
			if (res.success) {
				emits('success', form, mode.value)
				visible.value = false
				ElMessage.success(res.message)
			} else {
				ElMessage.error(res.message)
			}
			isSaveing.value = false
		}
	})
}

const setData = (data) => {
	for (let k in form) {
		if (data[k] || data[k] === 0) {
			form[k] = data[k]
		}
	}
}


const handlerUploadFileFile = (res) => {
	if (res.success) {
		form.file = res.url
	}
}
defineExpose({
	open, setData
})
</script>
